<template>
  <div class="app-container">
    <el-form ref="form" :rules="rules" :model="form" label-width="130px">
      <el-row :gutter="24">
        <el-col v-bind="grid2">
          <el-form-item label="经销商名称：" prop="distributorName">
            <el-input v-model="form.distributorName" placeholder="请输入经商名称"  />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="联系人：" prop="linkMan">
            <el-input v-model="form.linkMan" placeholder="请输入联系人"  />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="业务担当：" prop="header">
            <el-input v-model="form.header" placeholder="请输入业务担当"  />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="联系电话：" prop="linkTel">
            <el-input v-model="form.linkTel"  placeholder="请输入联系电话" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="微信：" prop="weixin">
            <el-input v-model="form.weixin"  placeholder="请输入微信" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="QQ：" prop="qq">
            <el-input v-model="form.qq"  placeholder="请输入qq" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="地址：" prop="address">
            <el-input v-model="form.address"  placeholder="请输入地址" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="仓库地址：" prop="wareHouse">
            <el-input v-model="form.wareHouse"  placeholder="请输入仓库地址" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="发票类型" prop="invoiceType">
            <el-radio v-model="form.invoiceType" :label="0">不开票</el-radio>
            <el-radio v-model="form.invoiceType" :label="1">普通发票</el-radio>
            <el-radio v-model="form.invoiceType" :label="2">专用发票</el-radio>
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="发票抬头：" prop="invoiceTitle">
            <el-input v-model="form.invoiceTitle"  placeholder="请输入发票抬头" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="税号：" prop="invoiceTax">
            <el-input v-model="form.invoiceTax"  placeholder="请输入税号" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="发票地址：" prop="invoiceAddress">
            <el-input v-model="form.invoiceAddress"  placeholder="请输入发票地址" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="发票电话：" prop="invoiceTel">
            <el-input v-model="form.invoiceTel"  placeholder="请输入发票电话" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="开户行：" prop="invoiceBank">
            <el-input v-model="form.invoiceBank"  placeholder="请输入开户行" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="开户行行号：" prop="invoiceBankNo">
            <el-input v-model="form.invoiceBankNo"  placeholder="请输入开户行行号" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="渠道：" prop="channel">
            <el-input v-model="form.channel"  placeholder="请输入渠道" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="终端数量：" prop="terminalQuantity">
            <el-input v-model="form.terminalQuantity"  placeholder="请输入终端数量" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="合作状态：" prop="cooperate">
            <el-select v-model="form.cooperate" style="width: 178px" placeholder="请选择合作状态">
              <el-option
                v-for="(item, index) in cooperates"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="合作日期" prop="cooperateDate">
            <el-date-picker
              style="width: 370px;"
              v-model="form.cooperateDate"
              placeholder="合作日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>

<!--        <el-col>
          <el-form-item label="拼团开始时间" prop="startTime">
            <template>
              <el-date-picker
                v-model="formValidate.startTime"
                type="datetime"
                placeholder="选择日期时间"
              />
            </template>
          </el-form-item>
        </el-col>-->

        <el-col v-bind="grid2">
          <el-form-item label="是否返点:" prop="isRebate">
            <el-radio v-model="form.isRebate" :label="0">不返点</el-radio>
            <el-radio v-model="form.isRebate" :label="1">返点</el-radio>
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="月返比例：" prop="monthRebateRatio">
            <el-input v-model="form.monthRebateRatio"  placeholder="请输入月返比例" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="年返比例：" prop="yearRebateRatio">
            <el-input v-model="form.yearRebateRatio"  placeholder="请输入年返比例" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="结算方式：" prop="settleMethod">
            <el-select v-model="form.settleMethod" style="width: 178px" placeholder="请选择结算方式">
              <el-option
                v-for="(item, index) in settleMethods"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="入账要求" prop="feeIncomeDate">
            <el-input v-model="form.feeIncomeDate"  placeholder="请输入账要求" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="最迟结款要求" prop="lastFeeIncomeDate">
            <el-input v-model="form.lastFeeIncomeDate"  placeholder="请输入最迟结款要求" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="保证金（分）：" prop="cashDeposit">
            <el-input v-model="form.cashDeposit"  placeholder="请输入保证金" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="收件人：" prop="consignee">
            <el-input v-model="form.consignee"  placeholder="请输入收件人" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="收件人电话：" prop="consigneeTel">
            <el-input v-model="form.consigneeTel"  placeholder="请输入收件人电话" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="对账日期" prop="verifyDate">
            <el-input v-model="form.verifyDate"  placeholder="请输入对账日期" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="结算日期" prop="closeDate">
            <el-input v-model="form.closeDate"  placeholder="请输入结算日期" />
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="是否单独报价" prop="customPrice">
            <el-radio v-model="form.customPrice" :label="0">不单独报价</el-radio>
            <el-radio v-model="form.customPrice" :label="1">单独报价</el-radio>
          </el-form-item>
        </el-col>

        <el-col v-bind="grid2">
          <el-form-item label="发货要求：" prop="deliveryRemark">
            <el-input v-model="form.deliveryRemark"  placeholder="请输入发货要求" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <!--<el-button type="text" @click="cancel">取消</el-button>-->
        <el-button :loading="loading" type="primary" @click="doSubmit">保存</el-button>
      </el-form-item>
    </el-form>
    <!--<div slot="footer" class="dialog-footer">-->
    <!--<el-button type="text" @click="cancel">取消</el-button>-->
    <!--<el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>-->
    <!--</div>-->
  </div>
</template>

<script>
import { edit,add,getInfo } from '@/api/yxDistributor'
import picUpload from '@/components/pic-upload'
import editor from '../components/Editor'
import yamedit from '@/components/YamlEdit'
import MaterialList from '@/components/material'
import UeditorWrap from 'vue-ueditor-wrap';
import { parseTime } from '@/utils/index'
export default {
  components: { editor, picUpload, yamedit, MaterialList, UeditorWrap },

  data() {
    return {
      grid2: {
        xl: 10,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24
      },
      loading: false, dialog: false,
      form: {
        id: '',
        distributorId: '',
        distributorName: '',
        linkMan: '',
        linkTel: '',
        channel: '',
        terminalQuantity: '',
        weixin: '',
        qq: '',
        wareHouse: '',
        address: '',
        invoiceType: '',
        invoiceTitle: '',
        invoiceTax: '',
        invoiceAddress: '',
        invoiceTel: '',
        invoiceBank: '',
        invoiceBankNo: '',
        header: '',
        cooperate: '',
        cooperateDate: '',
        isRebate: '',
        monthRebateRatio: '',
        yearRebateRatio: '',
        settleMethod: '',
        feeIncomeDate: '',
        lastFeeIncomeDate: '',
        cashDeposit: '',
        consignee: '',
        consigneeTel: '',
        verifyDate: '',
        closeDate: '',
        customPrice: '',
        deliveryRemark:''
      },
      rules: {
      },
      cooperates: [
        { key: 1, value: '未合作' },
        { key: 2, value: '已终止' },
        { key: 4, value: '战略合作' },
        { key: 8, value: '深度合作' },
        { key: 16, value: '普通合作' }
      ],
      settleMethods: [
        { key: 1, value: '现款' },
        { key: 2, value: '月结/期结' },
        { key: 4, value: '代销月结' },
        { key: 8, value: '授信月结' }
      ],
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 500, // 初始容器高度
        initialFrameWidth: '100%', // 初始容器宽度
        UEDITOR_HOME_URL: '/UEditor/',
        serverUrl: ''
      }
    }
  },
  watch: {
  },
  created() {
    this.form.id = this.$route.params.id
    this.$nextTick(() => {
      //this.init()
      if(this.form.id){
        getInfo(this.form.id).then(data => {
          this.form = data
          //this.form.imageArr = [data.imageInput]
        })
      }

    })
  },
  methods: {
    getCooperateDate() {
      this.form.cooperateDateArr = parseTime(new Date(),'{y}-{m}-{d}')
    },
    getFeeIncomeDate(){
      this.form.feeIncomeDateArr = parseTime(new Date(),'{y}-{m}-{d}')
    },
    getLastFeeIncomeDate(){
      this.form.lastFeeIncomeDateArr = parseTime(new Date(),'{y}-{m}-{d}')
    },
    getVerifyDate(){
      this.form.verifyDateArr = parseTime(new Date(),'{y}-{m}-{d}')
    },
    getCloseDate(){
      this.form.closeDateArr = parseTime(new Date(),'{y}-{m}-{d}')
    },
    /*addCustomDialog () {
      window.UE.registerUI('yshop', function (editor, uiName) {
        let dialog = new window.UE.ui.Dialog({
          iframeUrl: '/yshop/materia/index',
          editor: editor,
          name: uiName,
          title: '上传图片',
          cssRules: 'width:1200px;height:500px;padding:20px;'
        });
        this.dialog = dialog;

        var btn = new window.UE.ui.Button({
          name: 'dialog-button',
          title: '上传图片',
          cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
          onclick: function () {
            dialog.render();
            dialog.open();
          }
        });

        return btn;
      }, 37);
    },*/
    cancel() {
      this.resetForm()
    },
    doSubmit() {
      this.loading = true
      if (!this.form.id) {
        this.doAdd()
      } else this.doEdit()
    },
    doAdd() {
      add(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '添加成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        // this.$parent.init()
        setTimeout(() => {
          this.$router.push({ path: '/distributor/distributors' });
        }, 500);
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    doEdit() {
      edit(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        // this.$parent.init()
        setTimeout(() => {
          this.$router.push({ path: '/distributor/distributors' });
        }, 500);
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.form = {
        id: '',
        distributorId: '',
        distributorName: '',
        linkMan: '',
        linkTel: '',
        channel: '',
        terminalQuantity: '',
        weixin: '',
        qq: '',
        wareHouse: '',
        address: '',
        invoiceType: '',
        invoiceTitle: '',
        invoiceTax: '',
        invoiceAddress: '',
        invoiceTel: '',
        invoiceBank: '',
        invoiceBankNo: '',
        header: '',
        cooperate: '',
        cooperateDate: '',
        isRebate: '',
        monthRebateRatio: '',
        yearRebateRatio: '',
        settleMethod: '',
        feeIncomeDate: '',
        lastFeeIncomeDate: '',
        cashDeposit: '',
        consignee: '',
        consigneeTel: '',
        verifyDate: '',
        closeDate: '',
        customPrice: '',
        deliveryRemark:''
      }
    }
  }
}
</script>

<style scoped>

</style>
